<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--公共样式开始-->
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/reset.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/common.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Plugins/FontAwesome/css/font-awesome.min.css">
<!--公共样式结束-->
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/ztree.css">
<!--公共JS开始-->
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.min.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.timer.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/common.js"></script>
<!--公共JS结束-->
<!--ZTree开始-->
<link rel="stylesheet" href="{$NOW_THEME_URL}/Assets/Plugins/ZTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<include file="treeMenu" />
<script type="text/javascript" src="{$NOW_THEME_URL}/Assets/Plugins/ZTree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="{$NOW_THEME_URL}/Assets/Plugins/ZTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="{$NOW_THEME_URL}/Assets/Plugins/ZTree/js/jquery.ztree.exhide-3.5.js"></script>
<!--ztree结束-->
<style type="text/css">
	body {
		overflow:hidden;
	}
	.table_box {
	}
</style>
</head>

<body>
<div class="table_tool">
	<ul class="clearfix">			
		<li class="openwin btn" etitle="新增菜品分类" eheight="250px" ewidth="600px" ehref="{:U('Product/sortAdd')}" id="Product_sortAdd"><i class="icon-plus"></i> 新增菜品分类</li>
	</ul>
</div>
<div class="caipinfenlei clearfix">
		<div class="caipinfenlei_left">
			<form action="{:U('Product/sort')}" method="post" id="from_ele">
			<input type="hidden" name="rname" id="rname" value="" />
				<select name="restid" id="restSel">
					<eq name="restname" value="">
						<option value="">请选择</option>
					<else />
						{$restname}
					</eq>
					<volist name="rest" id="vo">
						<option value="{$vo.id}" >{$vo.title}({$vo.entitle})</option>
					</volist>
				</select>
			</form>
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div class="caipinfenlei_right">
			<div class="tb_title">基本信息</div>
			<table width="100%">
				<tr>
					<th class="btn_search">可选菜品</th>
					<th>操作</th>
					<th>
						<eq name="restname" value="" >
							跟该分类关联的菜品
						<else />
							您选择了{$restname}
						</eq>
					</th>
				</tr>
				<tr>
					<td width="38%">
						<select ondblclick="moveToRight('from_article','to_article',2)"
								style="width:100%;height:340px;" size="100" name="from_article[]" id="from_article">
	     											</select>
					</td>
					<td align="center" width="10%">
					
						<p><input type="button" class="btn" value=">" onclick="moveToRight('from_article','to_article',2);"></p>
						<p><input type="button" class="btn" value="<" onclick="moveToLeft('to_article');"></p>
						<p><input type="button" class="btn" value="<<" onclick="moveToLeftALL('to_article');"></p>
						<p><input type="button" class="btn" value="上移" onclick="moveUp(document.getElementById('to_article'));"></p>
							<p><input type="button" class="btn" value="下移" onclick="moveDown(document.getElementById('to_article'));"></p>
					</td>
					<td width="52%">
						<select ondblclick="moveToLeft('to_article');"
								multiple style="width:100%;height:340px;" name="to_article[]" id="to_article">
	     											</select>
					</td>
				</tr>
		
		</table>
		</div>
	</div>
	<div class="page_footer pdtd10">
		<input type="button" name="submit" value="提  交"  class="form_ele_submit"/>
		<input type="reset"  name="reset"  value="取  消"  class="form_ele_reset"/>
	</div>
	
	<script type="text/javascript">
	//弹出窗口全局变量
	var api = frameElement.api, W = api.opener;
	
	$(function(){
		
		//重置
		$('.form_ele_reset').on('click',function(){
			frameApi.close(); //关闭当前窗口
		});
		
		
		$("#restSel>option").each(function(){

			$(this).on("click",function(){
				$("#rname").val($(this).html());
				$("#from_ele").submit();
			});
			
		});
		
		//提交
		$('.form_ele_submit').on('click',function(){
			
			var postData = {};
			
			postData.id          = $("#id").val();
			postData.title       = $("#title").val();
			postData.keywords    = $("#keywords").val();
			postData.description = $("#description").val();
			
			$.post("__URL__/index",postData,function(d){
				
				windowApi.lhgdialog.alert('类别修改成功！');
				var obj = windowApi.lhgdialog.list['Column_index'];
				obj.reload(obj);
			});
		});
		
		$('.btn_search').live("click",function(){
			$.get("{:U('Product/relation')}",function(data){
				$('#from_article').html(data);
			})
		});
		
		$('.btn_search').trigger("click");
		
	});
	
	//上移
　	function moveUp(obj){　
　　　　　　for(var i=1; i < obj.length; i++){//最上面的一个不需要移动，所以直接从i=1开始
　　　　　　　　if(obj.options[i].selected){
　　　　　　　　　　if(!obj.options.item(i-1).selected){
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
				obj.options[i].text = obj.options[i-1].text;
				obj.options[i].value = obj.options[i-1].value;
				obj.options[i].selected = false;
				obj.options[i-1].text = selText;
				obj.options[i-1].value = selValue;
				obj.options[i-1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
    
	//下移
	function moveDown(obj){
　　　　　　for(var i = obj.length -2 ; i >= 0; i--){
　　　　　　　　if(obj.options[i].selected){
　　　　　　　　　　if(!obj.options[i+1].selected){
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
			    obj.options[i].text = obj.options[i+1].text;
			    obj.options[i].value = obj.options[i+1].value;
			    obj.options[i].selected = false;
			    obj.options[i+1].text = selText;
			    obj.options[i+1].value = selValue;
			   obj.options[i+1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
	
	//移动
	function moveOption(obj1, obj2){
		 for(var i = obj1.options.length - 1 ; i >= 0 ; i--){
			 if(obj1.options[i].selected){
				var opt = new Option(obj1.options[i].text,obj1.options[i].value);
				opt.selected = true;
				obj2.options.add(opt);
				obj1.remove(i);
			}
		 }
	}
		
	function moveToRight(fromid,toid,show){
		var from  = $('#'+fromid);
		var value = from.val();
		var flag  = true;
		$("#"+toid+" option").each(function(){
			if($(this).attr("id") == value){
				flag = false;
			}
		});
		if(flag){
			var text  = from.find("option:selected").text();
			var price = $('#rprice').val();
			var res   = parseInt(price);
			if(res<=0){
				price = from.find("option:selected").attr("price");
			}
			if(show == 1){
				var html  = "<option value='"+value+","+price+"' id='"+value+"'>"+text+"--["+price+"]</option>";
			}else{
				var html  = "<option value='"+value+","+price+"' id='"+value+"'>"+text+"</option>";
			}
			
			$("#"+toid).append(html); 
		}
	}
	
	function moveToLeft(toid){
		var from  = $('#'+toid).find("option:selected").remove();
	}
	
	function moveToLeftALL(toid){
		var from  = $('#'+toid+' option').remove();
	}
</script>
</html>
